<template>


    <el-card class="box-card">
        <el-row :gutter="10">
            <el-col :span="2.5">

                <el-select
                        v-model="hospitalId"
                        placeholder="请选择医院"
                        size="medium"
                        style="width: 180px"
                        @change="selectDepartment"
                >

                    <el-option
                            v-for="item in hospitalList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    />
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-input v-model="name" placeholder="请输入科室名称"></el-input>
            </el-col>
            <div class="btn">
                <el-button type="info" @click="clear">重置</el-button>
                <el-button type="primary" @click="findDepartment()">查询</el-button>
                <el-button type="success" @click="add">新增</el-button>
            </div>
        </el-row>
    </el-card>


    <el-card class="box-card2">
        <el-table
                :data="departmentList"
                style="width: 100%">


            <el-table-column
                    align="center"
                    prop="hospitalName"
                    label="医院"
            >
            </el-table-column>

            <el-table-column
                    align="center"
                    prop="name"
                    label="科室"
            >
            </el-table-column>


            <el-table-column
                    align="center"
                    prop="detail"
                    label="详情"
            >
            </el-table-column>

            <el-table-column
                    header-align="center"
                    align="center"
                    label="照片">
                <template v-slot="scope">
                    <img :src=imgUrl+scope.row.photopath width="100px">
                </template>
            </el-table-column>


            <el-table-column label="操作" width="200" align="center">
                <template #default="{ row }">
                    <div class="mybtn">

                        <el-button plain type="warning" @click="update(row)" class="smallbtn">编辑
                        </el-button>

                        <el-button plain type="danger" @click="del(row)" class="smallbtn">删除
                        </el-button>

                    </div>
                </template>
            </el-table-column>


            <template #empty>
                <el-empty description="没有数据"/>
            </template>

        </el-table>


        <el-pagination class="fenye"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       v-model:current-page="pageNum"
                       v-model:page-size="pageSize"
                       :page-sizes="[2, 4, 6, 8]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>


    </el-card>


    <el-dialog title="添加医院" v-model="dialogFormVisible" @close="clear()" width="1800px">
        <div class="ccc">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">

                <el-form-item label="医院" prop="hospitalId">
                    <el-select
                            v-model="form.hospitalId"
                            placeholder="请选择医院"
                            size="medium"
                            style="width: 180px"
                            @change="selectDepartment"
                    >

                        <el-option
                                v-for="item in hospitalList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>

                </el-form-item>

                <el-form-item label="科室" prop="departmentId">
                    <el-select
                            v-model="form.departmentId"
                            placeholder="请选择科室"
                            size="medium"
                            style="width: 180px"
                            @change="selectNo"
                    >

                        <el-option
                                v-for="item in noList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>


                <el-form-item label="详情" prop="detail">
                    <el-input type="textarea" v-model="form.detail"></el-input>
                </el-form-item>


                <el-form-item label="照片" prop="file">
                    <el-upload drag="true"
                               :on-progress="handleProgress"
                               v-model:file-list="fileList"
                               class="upload-demo"
                               :http-request="uploadFile"
                               :on-exceed="handleExceed"
                               :on-preview="handlePreview"
                               :on-remove="handleRemove"
                               list-type="picture"
                               limit="1"
                               :on-change="hanleChange"
                               :before-upload="beforeUpload"
                    >

                        <el-icon class="myPic">
                            <Plus/>
                        </el-icon>

                    </el-upload>
                </el-form-item>


            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click=clear>取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </div>
    </el-dialog>


</template>

<script setup>

    import {ref, reactive, onMounted} from "vue"
    import {Plus} from '@element-plus/icons-vue'
    import axios from 'axios'

    const hospitalList = ref([])

    const hospitalId = ref('')

    const pageNum = ref(1)
    const pageSize = ref(2)

    const name = ref('')

    const departmentList = ref([])

    const total = ref('')

    const dialogFormVisible = ref(false)

    const  imgUrl = 'http://localhost:8080/'


    const form = ref({
        file: ''
    })
    const formRef = ref({})

    const fileList = ref([])


    let fd = new FormData()


    const noList = ref([])


    const selectNo = async () => {

        const res = await axios.get('hospitalDepartment/findAdd?hospitalId='+form.value.hospitalId)
        noList.value = res.data.data
    }

    const uploadFile = (params) => {
        //缓存文件
        form.value.file = params.file
    }


    onMounted(async () => {
        const res = await axios.get('/hospital/findAll')
        hospitalList.value = res.data.data
        findDepartment()

    })


    const selectDepartment = () => {
        findDepartment()
        selectNo()
    }


    const findDepartment = async () => {
        const res = await axios.get('/department/page?pageNum=' + pageNum.value + '&pageSize=' + pageSize.value + '&hospitalId=' + hospitalId.value + '&name=' + name.value)
        departmentList.value = res.data.data.items
        total.value = res.data.data.total
    }

    const handleSizeChange = (ps) => {
        pageSize.value = ps
        findDepartment()
    }


    const handleCurrentChange = (num) => {
        pageNum.value = num
        findDepartment()

    }


    const clear = () => {
        name.value = ''
        hospitalId.value = ''
        findDepartment()
        dialogFormVisible.value = false
        formRef.value.resetFields();
        form.value = {}
        fileList.value=[]
    }

    const add = () => {
        dialogFormVisible.value = true
    }


    const rules = ref({
        hospitalId: [
            {required: true, message: '请选择医院', trigger: 'blur'},
        ],

        departmentId: [
            {required: true, message: '请选择科室名', trigger: 'blur'},
        ],

        detail: [
            {required: true, message: '请输入科室详情', trigger: 'blur'},
            {
                pattern: /^\S{2,10}/,
                message: '科室详情长度在2-50个非空字符',
                trigger: 'blur'
            }
        ],
        file: [
            {required: true, message: '请输入科室详情', trigger: 'blur'},

        ],

    })


    const handleExceed = () => {
        ElMessage.warning('超出最大文件数')
    }


    const save = async () => {
        await formRef.value.validate()
        for (let key in form.value) {
            fd.append(key, form.value[key])
        }

        const res = await axios.post('/hospitalDepartment/add', fd)

        ElNotification({
            title: '科室管理',
            message: '提交成功',
            duration: 2000,
            type: 'success'
        })

        clear()
    }

    const del = async (item) => {


        const res = await axios.get('/hospitalDepartment/del?hospitalId='+item.hospitalId+'&departmentId='+item.departmentId)
        ElNotification({
            title: '医院管理',
            message: '删除成功',
            duration: 2000,
            type:'success'
        })

        clear()
    }



</script>

<style scoped lang="scss">


    .box-card {
        margin-top: 15px;
    }

    .btn {
        margin-left: 20px;
    }

    .box-card2 {
        margin-top: 15px;

    }


    .fenye {
        margin-top: 30px;
        margin-left: 33%;
    }

    .ccc {
        width: 400px;

        margin: 10px auto;
        /*background-color: skyblue;*/
    }

    .myPic {
        width: 180px;
    }

</style>
